<template>
    <div class="l_collect" @mouseenter="getAllCollect()">
        <div class="his_t">
            <span class="fl">我的收藏</span>&nbsp;&nbsp;
            <span class="fr"><a href="#" @click.prevent="deleteAll()">清空</a></span>
        </div>
        <ul v-if="collectList != null && collectList.length != 0">
            <li v-for="collect in collectList" :key="collect.id">
                <div class="img"><a href="#" @click.prevent="toProductDetail(collect.product.id)"><img
                            :src="'http://192.168.144.183:9090/easybuyImages/' + collect.product.fileName" width="185"
                            height="162" /></a></div>
                <div class="name"><a href="#" @click.prevent="toProductDetail(collect.product.id)">{{
                        collect.product.name }}</a></div>
                <div class="price">
                    <font>￥<span>{{ collect.product.price }}</span></font> &nbsp;
                </div>
            </li>
        </ul>
        <div v-else>
            <div>暂无收藏。。。</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CollectShow',
    data() {
        return {
            userId: '',
            collectList: [],
        }
    },
    methods: {
        getAllCollect() {
            this.$axios({
                url: 'getCollectList',
                method: 'get',
                params: { userId: this.userId }
            }).then(rs => {
                if (rs.data.code == '5200' || rs.data.code == 5200) {
                    this.collectList = rs.data.collects

                }
            })
        },
        deleteAll() {
            if (this.collectList == null && this.collectList.length == 0) {
                alert('收藏夹已经为空！')
                console.log('=======')
                return
            }
            if (confirm('是否清空？')) {

                this.$axios({
                    url: 'deleteAllCollect',
                    params: { userId: this.userId }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == '5200') {
                        alert('删除成功！')
                        this.getAllCollect()
                    } else {
                        alert('删除失败！')
                    }
                })
            }
        },
        toProductDetail(id) {
            console.log("===========")
            this.$router.push({ path: '/productDetail', query: { id: id } })
        }
    },
    mounted() {
        this.userId = window.sessionStorage.getItem('userId')
        this.getAllCollect()
    }
}
</script>

<style scoped></style>
